<template>
  <div>
  <t-row :gutter="[24, 24]">
    <t-col :flex="3">
      <div class="user-left-greeting">
        <div>
          {{ userStore.userInfo.nick }}
          <span class="regular"> 你好，欢迎使用东方融媒社区一站式服务平台～</span>
        </div>
        <img src="@/assets/assets-rswl-logo.png" class="logo" />
      </div>

      <t-card class="user-info-list" title="个人信息" :bordered="false">
        <template #actions>
          <t-button theme="default" shape="square" variant="text">
            <t-icon name="ellipsis" />
          </t-button>
        </template>
        <t-row class="content" justify="space-between">
          <t-col class="contract" :span="3">
            <div class="contract-title">昵称</div>
            <div class="contract-detail">
              {{ userStore.userInfo.nick }}
            </div>
          </t-col>
          <t-col class="contract" :span="3">
            <div class="contract-title">积分余额</div>
            <div class="contract-detail">
              <t-space class="item">
                {{ userStore.assetInfo.Integral }}
                <!-- <t-button theme="default" variant="outline" @click="openRecharge">充值</t-button> -->
</t-space>
            </div>
          </t-col>
          <t-col class="contract" :span="3">
            <div class="contract-title">金币余额</div>
            <div class="contract-detail">
              {{ userStore.assetInfo.Gold }}
            </div>
          </t-col>
          <t-col class="contract" :span="3">
            <div class="contract-title">
              推广码
              <t-button theme="default" size="small" @click="handleCopy">复制</t-button>
            </div>
            <div class="contract-detail">
              {{ userStore.userInfo.invite_code }}
            </div>
          </t-col>
          <t-col class="contract" :span="3">
            <div class="contract-title">角色</div>
            <div class="contract-detail">
              {{ userStore.userInfo.role_name }}
            </div>
          </t-col>
          <t-col class="contract" :span="3">
            <div class="contract-title">会员有效期</div>
            <div class="contract-detail">
              {{ userStore.userInfo.vip_enddate }}
            </div>
          </t-col>
          <t-col class="contract" :span="3">
            <div class="contract-title">注册时间</div>
            <div class="contract-detail">
              {{ userStore.userInfo.registerDate }}
            </div>
          </t-col>
        </t-row>
      </t-card>

      <t-card class="content-container" :bordered="false">
        <t-tabs :default-value="tabIndex">
          <t-tab-panel :value="1" label="积分记录">
            <integralList></integralList>
          </t-tab-panel>
          <t-tab-panel :value="2" label="订单记录">
            <orderList></orderList>
          </t-tab-panel>
        </t-tabs>
      </t-card>
    </t-col>

    <t-col :flex="1">
      <t-card class="user-intro" :bordered="false">
        <t-avatar size="80px" :image="avatar">{{ userStore.userInfo.nick }}</t-avatar>
        <t-space direction="vertical">
          <div class="name">{{ userStore.userInfo.nick }}</div>
          <div class="position">{{ userStore.userInfo.role_name }}</div>
          <div><t-button variant="dashed" @click="visiblePasswordChange=true">修改密码</t-button></div>
        </t-space>

      </t-card>

      <!-- <t-card title="常用功能" class="user-team" :bordered="false">
        <template #actions>
          <t-button theme="default" shape="square" variant="text">
            <t-icon name="ellipsis" />
          </t-button>
        </template>
        <t-list :split="false">
          <t-list-item @click="toPage('/picture/HumanaAnime')">
            <t-list-item-meta title="人物动漫化" description="保护图像中的人物隐私,可避免识别出原人物是谁" />
          </t-list-item>
        </t-list>
      </t-card>

      <t-card title="微信小程序" class="product-container" :bordered="false">
        <template #actions>
          <t-button theme="default" shape="square" variant="text">
            <t-icon name="ellipsis" />
          </t-button>
        </template>
        <t-image
          src=""
        ></t-image>
      </t-card> -->
    </t-col>
  </t-row>

  <t-dialog header="修改密码" :visible="visiblePasswordChange" :footer="null" @close="visiblePasswordChange=false">
    <passwordSet></passwordSet>
  </t-dialog>
</div>
</template>
<script lang="ts">
export default {
  name: 'UserIndex',
};
</script>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import $eventBus from '@/utils/eventBus';
import integralList from './components/integralList.vue';
import orderList from './components/orderList.vue';
// import { assetModel } from '@/api/model/userModel';

import { LineChart } from 'echarts/charts';
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';

import { MessagePlugin } from 'tdesign-vue-next';
import { computed, nextTick, onMounted, onUnmounted, watch, ref } from 'vue';

import { useSettingStore, useUserStore } from '@/store';
import { changeChartsTheme } from '@/utils/color';
import useClipboard from 'vue-clipboard3';


import passwordSet from '@/components/user/password-settings.vue'

const store = useSettingStore();
const userStore = useUserStore();

const avatar = ref('');
if (userStore.userInfo.avatar && userStore.userInfo.avatar !== '') {
  avatar.value = userStore.userInfo.avatar + '?imageView2/1/w/80/h/80/q/75';
}
const handleCopy = () => {
  const { toClipboard } = useClipboard();
  toClipboard(userStore.userInfo.invite_code).then(() => {
    MessagePlugin.success('复制成功');
  });
};
const tabIndex = ref(1);

const visiblePasswordChange=ref(false)

onMounted(() => {
  nextTick(() => {
    //initChart();
  });
  window.addEventListener('resize', updateContainer, false);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateContainer);
});

const router = useRouter();
const toPage = (url: string) => {
  router.push(url);
};

let lineContainer: HTMLElement;
let lineChart: echarts.ECharts;
const chartColors = computed(() => store.chartColors);
echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);

const updateContainer = () => {
  lineChart?.resize({
    width: lineContainer.clientWidth,
    height: lineContainer.clientHeight,
  });
};

watch(
  () => store.brandTheme,
  () => {
    changeChartsTheme([lineChart]);
  },
);

const openRecharge = () => {
  $eventBus.emit('openRecharge');
};
</script>

<style lang="less" scoped>
@import url('./index.less');

.item {
  align-items: center;
}
</style>
